<template>
	<div class="notification" v-if="current_page_message_list.length>0&&route==notificationRoute">
		<template v-for="(item,index) in current_page_message_list||[]">
			<div 
				v-if="item.table_type!='100'"
			    class="item"
				:class="{show:item.show,show1:!autoClose&&item.show&&(current_page_message_list.length-1)-index===1,show2:!autoClose&&item.show&&(current_page_message_list.length-1)-index>1}"
				:key="item.id" @click="go(item,index)">

				<div class="flex">
					<div class="pic">
						<!--
						1、货物推广
						2、货物竞标
					
						3、有车求货竞标
						4、有货求车竞标
						5、小件货源竞标
						6、快递公司竞标
						
						7、跨境货代竞标
						8、专业代办竞标 -->

						<image :src='serverImageUrl("/static/images/chatbot/1.png")'
							v-if="item.table_type==1||item.table_type==2" mode="widthFix" class="icon"></image>
						<image :src='serverImageUrl("/static/images/chatbot/2.png")'
							v-else-if="item.table_type==3||item.table_type==4||item.table_type==5||item.table_type==6"
							mode="widthFix" class="icon"></image>
						<image :src='serverImageUrl("/static/images/chatbot/4.png")'
							v-else-if="item.table_type==7||item.table_type==8" mode="widthFix" class="icon"></image>
						<image :src='serverImageUrl("/static/images/chatbot/1024.png")' v-else mode="widthFix"
							class="icon">
						</image>
					</div>
					<div class="info">
						<div class="b">
							{{item.title}}
						</div>
						<div class="message-content">
							{{item.content}}
						</div>
					</div>
				</div>

				<div class="view-details">
					{{$t("查看详情")}}
				</div>

				<div class="close" @click.stop="close(item,index)">
					<image :src='serverImageUrl("/static/images/chatbot/close.png")' style="width:35rpx"
						mode="widthFix"></image>
				</div>
			</div>
			<view class="table_type100" v-if="item.table_type=='100'" :style="{'z-index':index+1}">
				<view class="posit-relat">
					<view class="posit-absol" style="width: 240rpx;height: 240rpx;top: -120rpx;left:calc(50% - 120rpx);">
						<image class="width-all height-all" style="" mode="widthFix"
							src="/static/images/user/newUI/notice.png" alt="" />
					</view>
					<div class="close" @click.stop="close(item,index)">
						<image :src='serverImageUrl("/static/images/chatbot/close.png")' style="width:35rpx"
							mode="widthFix"></image>
					</div>
					<view style="padding-top: 100rpx;" class="u-text-center">
						<view style="color: #005692;font-size: 40rpx;font-weight: bold;">{{$t('会议通知')}}</view>
						<view style="color: #005692;font-size: 30rpx;font-weight: bold;margin-top: 40rpx;padding: 0px 30rpx;">"{{item.title}}"{{$t('邀请您参加会议')}}</view>
						<view style="color: #005692;font-size: 14px;margin-top: 20rpx;font-weight: bold;">{{$t('会议号')}}</view>
						<view style="color: #005692;font-size: 14px;margin-top: 20rpx;font-weight: bold;">{{item.extra}}</view>
						<view style="color: #005692;font-size: 12px;margin-top: 40rpx;" v-if="item.countdownshow==false">{{$t('距离会议开始')}}:{{item.countdown}}</view>
						<view style="z-index: 0;margin-top: 40rpx;" class="flex flex-both">
							<u-button type="primary" shape="circle" style="width:45%;"   class="font-14 subp"   @click="go(item,index)">{{$t('前往多语管家')}}</u-button>
						</view>
					</view>
					
				</view>
			</view>
		</template>
		<div v-if="closeAllShow&&!autoClose" class="closeAll" @click="closeAll">
			<image src="../TUIKit/assets/icon/close-image.png" mode="widthFix"
				style="width:33rpx; margin-right: 8rpx; height:30rpx"></image>
			{{$t("关闭")}}
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				route: "",
				closeAllShow: false,
				current_page_message_list: []
			}
		},
		created() {
			let pages = getCurrentPages();
			let currentPage = pages[pages.length - 1];
			this.route = currentPage.route
		},
		computed: {
			notificationRoute() {
				return this.$store.state.notificationRoute;
			},
			autoClose() {
				return this.$store.state.autoClose
			},
			message_list() {
				return this.$store.state.socketIsShow.message_list
			}
		},
		watch: {
			message_list(n) {
				this.animation(n[n.length - 1])
			},
			current_page_message_list(newList) {
				newList&&newList.forEach((item,index)=>{
					if(item.table_type==100){
						if (item.intervalId) {
						  clearInterval(item.intervalId); 
						  item.intervalId=null
						}
						this.startCountdowns(item);
					}
					return  newList
				})
				if (this.current_page_message_list.length > 1) {
					this.closeAllShow = true;
					
				} else {
					this.closeAllShow = false;
				}
			}
		},
		methods: {
			startCountdowns(order) {
				console.log('startCountdowns',order)
			  const updateRemainingTime =  () => {
			    const now = Date.now();
			    const timeLeft = order.content - now;
			    if (timeLeft <= 0) {
				  clearInterval(order.intervalId);
				  order.intervalId=null
				  order.countdownshow=true
				  this.$set(order, 'countdown', ''); 
				//  order.countdown=""
			    } else {
				  order.countdownshow=false
			     // order.countdown = this.formatTime(timeLeft);
				  this.$set(order, 'countdown', this.formatTime(timeLeft)); 
			    }
			  };
			  // 定时更新倒计时
			  order.intervalId = setInterval(updateRemainingTime, 1000);
			  updateRemainingTime();
			},
			formatTime(ms) {
			  const seconds = Math.floor(ms / 1000);
			  const minutes = Math.floor(seconds / 60);
			  const remainingSeconds = seconds % 60;
			  return `${minutes.toString().padStart(2, "0")}:${remainingSeconds
			    .toString()
			    .padStart(2, "0")}`;
			},
			closeAll() {
				this.closeAllShow = false;
				this.current_page_message_list.forEach(item => {
					item.show = false;
				})
				setTimeout(() => {
					this.current_page_message_list = [];
				}, 400)
			},
			animation(nItem) {
				var index = this.current_page_message_list.length;
				var nItem = JSON.parse(JSON.stringify(nItem));
				this.current_page_message_list.push(nItem);
				setTimeout(() => {
					nItem.show = true;
				}, 100)
				if (this.autoClose) {
					setTimeout(() => {
						nItem.show = false;
						this.closeOne();
					}, 5000)
				}

			},
			close(item, index) {
				if(item.table_type=='100'){
					clearInterval(item.intervalId);
					item.intervalId=null
				}
				item.show = false
				setTimeout(() => {
					this.current_page_message_list.splice(index, 1)
				}, this.autoClose ? 300 : 150)
			},
			closeOne() {
				setTimeout(() => {
					if (!this.autoClose) {
						this.current_page_message_list.pop()
					} else {
						this.current_page_message_list.shift()
					}
				}, this.autoClose ? 300 : 150)
			},
			go(item,index) {
				if (item.path == '/pages/tabbar/message/index') {
					uni.switchTab({
						url: "/TUIKit/components/TUIConversation/list"
					})
					item.show = false;
					this.closeOne();
				} else {
					if(item.table_type=='100'){
						clearInterval(item.intervalId);
						item.intervalId=null
						uni.navigateTo({
							url: item.path+'?typeAction=2'
						})
						this.close(item,index)
					}else{
						uni.navigateTo({
							url: item.path
						})
					}
					
					item.show = false;
					this.closeOne();
				}

			}
		}
	}
</script>

<style lang="scss">
	.flex {
		display: flex;
		align-items: center;
	}

	.notification {
		position: fixed;
		top: var(--status-bar-height);
		left: 50%;
		top: 50%;
		transform: translate3d(-50%, -50%, 0);
		width: 600rpx;
		min-height: 220rpx;
		// background: rgba(0, 0, 0, 0.5);
		z-index: 99999;
		padding-top: 30rpx;

		.item {
			background-color: #fff;
			border-radius: 36rpx;
			position: absolute;
			width: 90%;
			top: -30%;
			height: 100%;
			left: 5%;
			box-shadow: 0 4rpx 4rpx #C7C7C7;
			color: #6D727E;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			transform: translate3d(0, 50rpx, 0);
			transition: .3s ease;
		}

		.message-content {
			margin-top: 8rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			/* 定义显示的行数 */
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.info {
			width: 100%;
		}

		.pic {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			margin-right: 16rpx;
			width: 115rpx;
			height: 115rpx;
			border-radius: 20rpx;
			background: linear-gradient(#efefef, #dfdfdf);

			.icon {
				width: 110rpx;
				max-height: 115rpx;
				max-width: 115rpx;
				border-radius: 20rpx;
			}
		}
	}

	.b {
		color: #000;
		font-weight: bold;
		font-size: 24rpx;
	}

	.show {
		transform: translate3d(0, 0, 0) !important;
	}

	.show1 {
		transform: translate3d(0, 20rpx, 0) scale(.9) !important;
	}

	.show2 {
		transform: translate3d(0, 40rpx, 0) scale(.8) !important;
	}

	.close {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}

	.closeAll {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		background-color: #fff;
		border-radius: 40rpx;
		padding: 10rpx 20rpx;
		top: 280rpx;
		left: 50%;
		transform: translate3d(-50%, 0, 0);
		font-size: 24rpx;
		font-weight: bold;
		box-shadow: 0 4rpx 4rpx #C7C7C7;
	}

	.view-details {
		background-color: #3777fb;
		color: #fff;
		text-align: center;
		padding: 20rpx 0;
		border-radius: 15rpx;
		margin-top: 20rpx;
	}
	.table_type100{
		    background-color: #fff;
		    border-radius: 32rpx;
			padding-bottom: 40rpx;
			background-image: url(/static/images/user/newUI/pingjia.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 100%;
			position: absolute;
			top: -200rpx;
	}
	.subp {
		background-image: linear-gradient(to right, #B9E2FF, #0295FA);
		text-align: center;
		color: #ffffff;
		margin: auto;
		margin-top: 15px;
		margin-bottom: 10px;
	}
</style>